<template lang="pug">
    .page-header-content.py-10
        .page-header-title.py-lg-5
        transition(name="fade")
            div(class="banner-title" v-show="flag" v-if="hasTitle")
                | {{trimTitle}}
</template>

<script>
export default {
    name: 'home-header',
    props: {
        bannerTitle: {
            type: String,
            default: '绿树阴浓夏日长 石桥倒影入池塘',
        },
    },
    data() {
        return {
            flag: true,
            title: this.bannerTitle,
        };
    },
    computed: {
        hasTitle() {
            if (
                this.title == null ||
                this.title == '' ||
                this.title.trim().length === 0
            ) {
                return false;
            }
            return true;
        },
        trimTitle() {
            let _title = this.title;
            if (_title && _title.length > 36) {
                _title = _title.substring(0, 36);
                _title += '...';
            }
            return _title;
        },
    },
    watch: {
        bannerTitle: function(newVal) {
            this.flag = false;
            setTimeout(() => {
                this.title = newVal;
                this.flag = true;
            }, 1000);
        },
    },
};
</script>

<style scoped lang="scss">
.banner-title {
    position: absolute;
    bottom: 100px;
    left: 0;
    padding: 0.4rem 1.5rem;
    color: white;
    font-size: 1.3rem;
    max-width: 90%;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0.2)
    );
    transition: all 0.3s ease-in-out;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.7s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
</style>
